<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-12 21:35:46
 * @LastEditTime: 2019-10-05 23:05:03
 * @LastEditors: Please set LastEditors
 -->
<template>
  <Row class="mo-write">
    <Col :lg="{span:4,offset:4}" class="write-aside">
      <LoadBox v-if="isLoading"></LoadBox>
      <h2>作品列表</h2>
      <div
        class="article-list"
        v-for="(v, i) in artlist"
        :key="i"
        @click="getMyArt({artid:v.id,id:i})"
        v-if="artlist.length != 0"
      >
        <label>{{v.imoshi==1?'文':'连'}}</label>
        <small style="padding-left:5px;">{{v.ititle}}</small>
      </div>
      <div v-if="artlist.length == 0">加载中，请尝试一下写作功能吧！</div>
    </Col>
    <Col :lg="{span:12}" class="write-col">
      <div class="write-col-box" style="height:100%">
        <h2>
          编写文章
          <span style="font-size:14px;margin-left:5px;cursor:pointer" @click="resetArt">[重置]</span>
        </h2>
        <quill-editor
          v-model="content"
          @change="onEditorChange"
          height="600"
          class="quill-editor"
          :options="myOption"
        ></quill-editor>
        <div class="write-col-ctl">
          <button @click="inputMes">完善信息</button>
          <button v-if="isMesin" @click="submit">提交审核</button>
          <button v-if="isUpdate" @click="updateArt">更新内容</button>
        </div>
      </div>
      <transition name="articleSlot" mode="out-in">
        <ArticleBox v-if="formessage">
          <div class="write-mes-box">
            <div class="write-item">
              <label>标题:</label>
              <input class="title-input" type="text" v-model="ititle" />
            </div>
            <div class="write-item">
              <label>分类:</label>
              <CheckboxGroup v-model="iclass">
                <Checkbox label="科学">
                  <!-- <Icon type="logo-twitter"></Icon> -->
                  <span>科学</span>
                </Checkbox>
                <Checkbox label="技术">
                  <!-- <Icon type="logo-facebook"></Icon> -->
                  <span>技术</span>
                </Checkbox>
                <Checkbox label="二次元">
                  <!-- <Icon type="logo-github"></Icon> -->
                  <span>二次元</span>
                </Checkbox>
                <Checkbox label="吐槽">
                  <!-- <Icon type="logo-snapchat"></Icon> -->
                  <span>吐槽</span>
                </Checkbox>
              </CheckboxGroup>
            </div>
            <div class="write-item">
              <label>模式:</label>
              <RadioGroup v-model="imoshi" @on-change="whatID">
                <Radio label="0">
                  <span>连载</span>
                </Radio>
                <Radio label="1">
                  <span>文章</span>
                </Radio>
              </RadioGroup>
              <Tooltip
                content="前往我的作品可查看作品ID！"
                placement="top"
                style="height:21px;"
                v-if="isLianzai"
              >
                <div class="lianzai-question"></div>
              </Tooltip>
              <label v-if="isLianzai">作品ID:</label>
              <input class="lianzai-input" type="number" v-if="isLianzai" v-model="artid" />
            </div>
            <div class="write-item">
              <label>简介:</label>
              <Input
                v-model="ijianjie"
                placeholder="简单介绍下吧"
                style="width: 200px;height:30px;"
                size="small"
              />
            </div>
            <div class="write-item">
              <label>概要:</label>
              <Input
                v-model="igaiyao"
                placeholder="概要也很重要哦！"
                style="width: 200px;height:60px;"
                type="textarea"
                class="write-item-gaiyao"
              />
            </div>
            <div class="write-item-ctl">
              <div class="write-item-ctl-ok" @click="writeOk"></div>
              <div class="write-item-ctl-back" @click="back"></div>
            </div>
          </div>
        </ArticleBox>
      </transition>
    </Col>
  </Row>
</template>
<script>
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block"], // 引用  代码块
  [{ header: 1 }, { header: 2 }], // 1、2 级标题
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  [{ script: "sub" }, { script: "super" }], // 上标/下标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  // [{'direction': 'rtl'}],                         // 文本方向
  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ font: [] }], // 字体种类
  [{ align: [] }], // 对齐方式
  ["clean"], // 清除文本格式
  ["link"] // 链接、图片、视频
];
import {
  Input,
  CheckboxGroup,
  Checkbox,
  Radio,
  RadioGroup,
  AutoComplete
} from "view-design";
import ArticleBox from "../articleMes/articleMes";
import LoadBox from "../../alert/loadBox/loadBox";
import $ from "jquery";
export default {
  name: "moWrite",
  data() {
    return {
      content: "",
      iclass: [],
      imoshi: "",
      ijianjie: "",
      igaiyao: "",
      ititle: "",
      formessage: false,
      isLianzai: false,
      isMesin: false,
      artid: "",
      myOption: {
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      artlist: [],
      isUpdate: false,
      nowId: "",
      isLoading: false
    };
  },
  props: ["id"],
  computed: {
    // isLogin() {
    //   return this.id;
    // }
  },
  created() {
    this.$axios
      .get(
        this.$store.getters.url +
          "/myartlistbom?userId=" +
          localStorage.getItem("loginfo2")
      )
      .then(res => {
        this.artlist = res.data.data;
      });
  },
  mounted() {
    console.log(document.cookie.split("; "));
  },
  methods: {
    onEditorChange: function() {
      console.log(this.content);
    },
    inputMes: function() {
      this.formessage = true;
    },
    back: function() {
      this.formessage = false;
    },
    //是否为连载文章
    whatID: function(e) {
      if (e == "0") {
        this.isLianzai = true;
      } else {
        this.isLianzai = false;
      }
    },
    //完善信息
    writeOk: function() {
      console.log(this.ijianjie);
      console.log(this.iclass);
      if (
        this.iclass.length != 0 &&
        this.imoshi != "" &&
        this.ijianjie != "" &&
        this.igaiyao != "" &&
        this.ititle != ""
      ) {
        if (this.isLianzai == true && this.artid != "") {
          if (this.isUpdate == false) {
            this.isMesin = true;
          } else {
            this.isUpdate = true;
          }
          this.formessage = false;
        } else if (this.isLianzai == false) {
          if (this.isUpdate == false) {
            this.isMesin = true;
          } else {
            this.isUpdate = true;
          }
          this.formessage = false;
        } else {
          this.$Message.info("请填写完整信息!");
        }
      } else {
        this.$Message.info("请填写完整信息!");
      }
    },
    //提交文章
    submit: function() {
      // this.$axios.post(this.$store.getters.url + "/post");
      this.$axios
        .post(this.$store.getters.url + "/write", {
          data: {
            article: this.content,
            iclass: this.iclass.join(","),
            imoshi: this.imoshi,
            ijianjie: this.ijianjie,
            igaiyao: this.igaiyao,
            ititle: this.ititle,
            artid: this.artid != "" ? this.artid : "-1",
            owner: this.id
          }
        })
        .then(res => {
          if (res.data.code == "200") {
            this.$Message.success("提交成功！");
          } else if (res.data.code == "201") {
            this.$Message.info("您尚有文章未审核！");
          } else if (res.data.code == "416") {
            this.$Message.error("您的文章格式不正确！");
          }
        });
    },
    //获取我的文章内容
    getMyArt: function(e) {
      this.isUpdate = true;
      this.isLoading = true;
      const ids = e.id + 1;
      $(".article-list").css("background-color", "white");
      $(".article-list:nth-of-type(" + ids + ")").css(
        "background-color",
        "#ddd"
      );
      this.$axios
        .get(this.$store.getters.url + "/getMyArticleMain?artId=" + e.artid)
        .then(res => {
          console.log(res.data.data);
          this.content = res.data.data.article;
          this.iclass = res.data.data.iclass.split(",");
          this.ititle = res.data.data.ititle;
          this.imoshi = res.data.data.imoshi;
          this.ijianjie = res.data.data.ijianjie;
          this.igaiyao = res.data.data.igaiyao;
          this.nowId = res.data.data.id;
          let timer = setTimeout(() => {
            this.isLoading = false;
            clearTimeout(timer);
          }, 1000);
          timer = null;
        });
    },
    //更新文章内容
    updateArt: function() {
      this.$axios
        .post(this.$store.getters.url + "/updateMyArticle", {
          data: {
            article: this.content,
            iclass: this.iclass.join(","),
            imoshi: this.imoshi,
            ijianjie: this.ijianjie,
            igaiyao: this.igaiyao,
            ititle: this.ititle,
            artid: this.artid != "" ? this.artid : "-1",
            userId: this.id,
            id: this.nowId
          }
        })
        .then(res => {
          console.log(res.data);
          this.$Message.success(res.data.msg);
        });
    },
    //重置文章书写
    resetArt: function() {
      this.iclass = "";
      this.imoshi = "";
      this.ititle = "";
      this.content = "";
      this.ijianjie = "";
      this.igaiyao = "";
      this.isMesi = false;
      this.isUpdate = false;
    }
  },
  components: {
    Input,
    CheckboxGroup,
    Checkbox,
    Radio,
    RadioGroup,
    ArticleBox,
    AutoComplete,
    LoadBox
  }
};
</script>
<style lang="scss" scoped>
$baseUrl: "../../../../";
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.mo-write {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .write-col {
    background-color: white;
    height: 100%;
    // max-height: 713px;
    overflow: auto;
    &::-webkit-scrollbar {
      background-color: white;
      width:4px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: black;

    }
    h2 {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .write-col-ctl {
      display: flex;
      padding-top: 10px;
      padding-bottom: 10px;
      justify-content: flex-end;
      padding-right: 10px;
      button {
        width: 80px;
        background-color: white;
        outline: none;
        border: 1px solid black;
        cursor: pointer;
        padding-top: 3px;
        padding-bottom: 3px;
        margin-right: 20px;
        &:hover {
          background-color: black;
          color: white;
        }
      }
    }
  }
  .write-aside {
    background-color: white;
    // border-right: 1px solid #ccc;
    // margin-right: 20px;
    overflow: auto;
    &::-webkit-scrollbar {
      background-color: white;
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: black;
    }
    h2 {
      padding: 10px;
    }
    .article-list {
      display: flex;
      text-align: left;
      padding-left: 15px;
      padding-bottom: 4px;
      padding-top: 4px;
      small {
        display: inline-flex;
        overflow: hidden;
        white-space: nowrap;
        flex: 1;
        margin-right: 15px;
      }
      &:hover {
        cursor: pointer;
      }
      &:hover label {
        margin-right: 10px;
      }
      label {
        display: inline-block;
        background-color: black;
        color: white;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        transition: all 0.4s;
        font-size: 12px;
      }
    }
  }
}
.write-col-box {
  position: relative;
  top: 0px;
  width: 100%;
  background-color: white;
}
.write-mes-box {
  position: relative;
  background-color: white;
  height: auto;
  width: auto;
  padding: 10px;
  animation: showMesbox 0.4s;
  .write-item {
    display: flex;
    width: 100%;
    min-height: 30px;
    font-size: 16px;
    padding-left: 15px;
    margin-bottom: 10px;
    align-items: center;
    label {
      padding-right: 10px;
      font-size: 14px;
    }
    .write-item-gaiyao {
      position: relative;
      height: 60px;
    }
    .lianzai-input {
      height: 21px;
      width: 40px;
      font-size: 12px;
    }
    .lianzai-question {
      height: 15px;
      width: 15px;
      background: url($baseUrl+"assets/SAOIcon/icon/help_normal.png") no-repeat;
      background-size: cover;
    }
  }
  .write-item-ctl {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 30px;
    .write-item-ctl-ok {
      width: 30px;
      height: 30px;
      background: url($baseUrl+"assets//SAOIcon/icon/ok_normal.png") no-repeat;
      background-size: cover;
      cursor: pointer;
      &:hover {
        background: url($baseUrl+"assets/SAOIcon/icon/ok_hover.png");
        background-size: cover;
      }
    }
    .write-item-ctl-back {
      width: 30px;
      height: 30px;
      background: url($baseUrl+"assets//SAOIcon/icon/cancel_normal.png")
        no-repeat;
      background-size: cover;
      cursor: pointer;
      &:hover {
        background: url($baseUrl+"assets/SAOIcon/icon/cancel_hover.png");
        background-size: cover;
      }
    }
  }
}
.articleSlot-enter-active,
.articleSlot-leave-active {
  transition: all 0.2s;
}
.articleSlot-enter {
  opacity: 0;
}
.articleSlot-leave-to {
  opacity: 0;
}
// @keyframes showMesbox {
//   0% {
//     transform: scale(0);
//   }
//   100% {
//     transform: scale(1);
//   }
// }
</style>